<!-- 营业执照Form表单 -->
<template>
  <div class="business-licence-form">
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @opened='openedDialog'
      width="846px"
    >
      <slot name="header"/>
      <el-form :model="businessFormData" :disabled='edit' :rules="rules" ref="businessFormItem" label-width="160px" class="business-form-item">
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="businessFormData.companyName" :disabled='true' placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="信用代码" prop="creditCode">
          <el-input  placeholder="请输入信用代码" :disabled='true' v-model="businessFormData.creditCode"></el-input>
        </el-form-item>
        <el-form-item label="企业类型" prop="companyType">
          <el-select v-model="businessFormData.companyType">
            <el-option v-for="(item, index) in companyTypeOpsEnum" :key='index + "m"' :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址（公司住所）" prop="address">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="businessFormData.address"></el-input>
        </el-form-item>
        <el-form-item label="注册资本" prop="registeredCapital">
          <el-input v-model="businessFormData.registeredCapital"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人" prop="president">
          <el-input v-model="businessFormData.president"></el-input>
        </el-form-item>
        <el-form-item label="长期有效" prop="effectivenessKey">
          <el-select @change="changeEffectiveness" v-model="businessFormData.effectivenessKey">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="date">
          <div class="date-ops-corver">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="businessFormData.startDate"
              align="right"
              type="date"
              placeholder="开始日期"
              @change="changeDate"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
            <div class="date-split">
              <span></span>
            </div>
            <el-date-picker
              value-format="yyyy-MM-dd"
              :disabled='!!Boolean(businessFormData.effectivenessKey)'
              v-model="businessFormData.endDate"
              align="right"
              type="date"
              placeholder="结束日期"
              @change="changeDate"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="经营范围" prop="businessScope">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="businessFormData.businessScope"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="url">
          <div class="url-corver">
            <licence-img-card
              v-model="businessFormData.url"
              :imgUrl='businessFormData.url'
              @uploadCb='getUploadUrl'
              :disabled='edit'
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseSubmit">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import licenceImgCard from '@/moduleComponents/licence/card/licenceImgCard'
import {companyNewListCompanyTypeVO} from '@api/auth_center_v1.js'
import {qichachaCompanyName} from '@api/interface_center_v1.js'

export default {
  name: 'businessLicenceForm',
  components: {
    licenceImgCard
  },
  props: {
    adminInfoDataForm: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    },
    edit: {
      default: false,
      type: Boolean
    },
    type: {
      default: 'create',
      type: String
    }
  },
  watch:{
    form:{
      handler(nv,ov) {
        if(!nv) return
        this.businessFormData = {
          companyName: nv.companyName, //企业名称
          creditCode: nv.creditCode, // 信用代码
          companyType: nv.companyType, // 企业类型
          address: nv.address, // 地址
          registeredCapital: nv.registeredCapital, // 注册资本
          president: nv.president, // 法定代表人
          effectivenessKey: nv.effectivenessKey, // 长期有效
          startDate: nv.startDate, // 有效期-开始日期
          endDate: nv.endDate, // 有效期-开始日期
          businessScope: nv.businessScope, // 经营范围
          url: nv.url, // 营业执照
          date: '' // 有效期
        } || {}
        this.changeDate()
        // if(!((!nv.startDate || !nv.endDate) && !nv.effectivenessKey)){
        //   this.businessFormData.date = ((this.businessFormData && this.businessFormData.startDate) || '') + '' + ((this.businessFormData && this.businessFormData.endDate) || '')
        // }
      },
      deep: true
    }
  },
  mounted() {
    this.getCompanyType()
  },
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.businessFormData.endDate
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.businessFormData.startDate
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            )
          } else {
            return time.getTime() < Date.now()
          }
        }
      },
      companyTypeOpsEnum:{},
      businessFormData: {
        companyName: '', //公司名称
        creditCode: '', // 信用代码
        companyType: '', // 企业类型
        address: '', // 地址
        registeredCapital: '', // 注册资本
        president: '', // 法定代表人
        effectivenessKey: 0, // 长期有效
        startDate: '', // 有效期-开始日期
        endDate: '', // 有效期-开始日期
        businessScope: '', // 经营范围
        url: '', // 营业执照
        date: '' // 有效期
      },
      rules: {
        companyType: [
          { required: true, message: '请输入企业类型', trigger: 'change' },
        ],
        address: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        registeredCapital: [
          { required: true, message: '请输入注册资本', trigger: 'blur' },
        ],
        president: [
          { required: true, message: '请输入法定代表人', trigger: 'blur' },
        ],

        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        creditCode: [
          { required: true, message: '请输入信用代码', trigger: 'blur' },
        ],
        effectivenessKey: [
          { required: true, message: '请选择是否长期有效', trigger: 'change' },
        ],
        date: [
          { required: true, message: '请选择有效期', trigger: 'change' },
        ],
        businessScope: [
          { required: true, message: '请输入经营范围', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请上传证照图片', trigger: 'change' },
        ]
      }
    }
  },
  methods:{
    openedDialog() {
      if(this.adminInfoDataForm.companyName !== this.businessFormData.companyName) {
        this.businessFormData.companyName = this.adminInfoDataForm.companyName
        this.getCompanyDetailByName()
      }
    },
    changeEffectiveness() {
      if(!!this.businessFormData.effectivenessKey) {
        this.businessFormData.endDate = ''
      }
      // 重新为date赋值
      this.changeDate()
    },
    changeDate() {
      // 非长期有效模式
      if((!this.businessFormData.startDate || !this.businessFormData.endDate) && !this.businessFormData.effectivenessKey){
        this.businessFormData.date = ''
        return
      }
      // 长期有效模式
      if(!this.businessFormData.startDate && this.businessFormData.effectivenessKey) {
        this.businessFormData.date = ''
        return
      }
      this.businessFormData.date = (this.businessFormData.startDate || '') + '#' + (this.businessFormData.endDate || '')
    },
    getCompanyDetailByName() {
      this.$axios({
        method: 'get',
        url: qichachaCompanyName,
        params:{
          companyName: this.businessFormData.companyName
        }
      }).then(res => {
        let result = res.data.payload
        this.businessFormData.creditCode = result.creditCode
        this.businessFormData.address = result.address
        this.businessFormData.registeredCapital = result.registCapi
        this.businessFormData.president = result.operName
        this.businessFormData.startDate = result.termStart.split(' ')[0]
        this.businessFormData.endDate = result.teamEnd.split(' ')[0]
        this.businessFormData.businessScope = result.scope
        this.businessFormData.effectivenessKey = result.teamEnd ? 0 : 1
        this.changeDate()
        // this.businessFormData.url = result.imageUrl
        this.$emit('updateAutoData', this.businessFormData)
        console.log(this.businessFormData,'businessFormData')
      }).finally(() => {
        this.$refs.businessFormItem.clearValidate()
      })
    },
    getCompanyType() {
      this.$axios({
        method: 'get',
        url: companyNewListCompanyTypeVO
      }).then(res => {
        this.companyTypeOpsEnum = res.data.payload
      })
    },
    getUploadUrl(data) {
      this.businessFormData.url = data.payload
      this.$refs.businessFormItem.validateField('url', (callback)=> {
        console.log('callback', callback)
      }) 
    },
    refuseSubmit() {
      this.$emit('refuse')
    },
    confirmSubmit() {
      console.log(this.businessFormData,'this.businessFormData')
      this.$refs['businessFormItem'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.businessFormData)
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="less">
.business-licence-form {
  .el-dialog__body{
    padding: 0;
  }
  .el-input__inner, .el-textarea__inner{
    width: 330px;
  }
  .el-textarea__inner{
    min-height: 54px;
    max-height: 54px;
    height: 54px;
  }
  .el-date-editor.el-input{
    width: 144px;
  }
  .date-ops-corver{
    .el-input__inner, .el-textarea__inner{
      width: 144px;
    }
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .date-split{
      width: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        display: inline-block;
        font-size: 0;
        width: 20px;
        border-top: 1px solid #ccc;        
      }
    }
  }
  .url-corver{
    width: 330px;
    height: auto;
  }
  .dialog-class-name {
    padding-bottom: 20px;
    font-size: 14px;
    color: #E63937;
  }
  .business-form-item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
</style>
